<template>
  <view class="index">
    <view v-if="!isStart" class="home center">
      <view class="header">
        <text class="title">焦虑测评</text>
        <text class="subtitle">科学评估，了解自己的焦虑水平</text>
      </view>
      <view class="ind_from">
        <image class="banner" :src="banner" mode="widthFix"></image>
      </view>
      <view class="features">
        <view class="feature-item">
          <view class="feature-icon">📊</view>
          <text class="feature-text">专业量表</text>
        </view>
        <view class="feature-item">
          <view class="feature-icon">🔒</view>
          <text class="feature-text">隐私保护</text>
        </view>
        <view class="feature-item">
          <view class="feature-icon">⚡</view>
          <text class="feature-text">即时分析</text>
        </view>
      </view>
      <view class="description">
        <view class="desc-title">测评说明</view>
        <view class="desc-content">
          <text class="desc-item">• 本测评基于SAS焦虑自评量表</text>
          <text class="desc-item">• 共5个问题，约需3分钟完成</text>
          <text class="desc-item">• 请根据最近一周的实际感受作答</text>
        </view>
      </view>
      <view class="btn" @click="goStart">
        <text class="btn-text">开始测评</text>
        <text class="btn-icon">→</text>
      </view>
      <view class="sub_text">
        <view class="p red">仅供娱乐 积极生活</view>
        <view class="p gray">本测试结果仅供参考，如有需要请咨询专业医生</view>
      </view>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>
    <view v-else class="quiz">
      <view v-if="isFinish" class="finish">
        <view v-if="isLock" class="unlock">
          <div class="text">
            <text class="p">恭喜您</text>
            <text class="p">已完成作答</text>
          </div>
          <button class="btn" @click="submit" type="primary">
            观看广告查看结果
          </button>
        </view>
        <view v-else class="result">
          <text class="title">{{ title }}测试结果</text>
          <text class="level">{{ curResult.title }}</text>
          <text class="desc">{{ curResult.desc }}</text>
          <button class="btn btn-home" @click="goHome" type="default">返回首页</button>
        </view>
      </view>
      <view v-else class="content">
        <view class="header">
          <view class="location">
            <text>{{ curIndex + 1 }}</text>
            <text>/</text>
            <text>{{ dataList.length }}</text>
          </view>
          <view class="progress-bar">
            <view class="progress" :style="{ width: `${((curIndex + 1) / dataList.length) * 100}%` }"></view>
          </view>
        </view>
        <view class="question">
          <text class="text">{{ curQuizInfo.question }}</text>
        </view>
        <view class="answer">
          <text
            class="item"
            @click="selectAnswer(index)"
            v-for="(item, index) in curQuizInfo.answerList"
            :class="{ select: item.select }"
            :key="index"
          >{{ item.answer }}</text>
        </view>
      </view>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
import banner from "./static/sas_banner.jpg";
import { sasDataList, sasResultList } from "./static/sas.js";
export default {
  data() {
    return {
      isStart: false,
      title: "",
      banner: banner,
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      curQuizInfo: {
        question: "",
        score: 0,
        answerList: [],
      },
      curResult: {
        level: null,
        min: null,
        max: null,
        title: "",
        desc: "",
      },
      isLock: true,
      isFinish: false,
      curIndex: 0,
      totalScore: 0,
      dataList: [],
      resultList: [],
      resultMap: {},
    };
  },
  methods: {
    goStart() {
      this.initQuiz();
      this.isStart = true;
    },
    initQuiz() {
      let newDataList = sasDataList;
      this.resultList = sasResultList;
      for (let i in newDataList) {
        for (let j in newDataList[i].answerList) {
          newDataList[i].answerList[j].select = false;
        }
      }
      this.dataList = newDataList;
      if (this.dataList.length > 0) {
        this.curQuizInfo = this.dataList[0];
      }
    },
    submit() {
      showAdConfirmModal(() => {
        try {
          adVideoShow(() => {
            this.unLock();
          });
        } catch (error) {
          this.unLock();
        }
      });
    },
    // 解锁
    unLock() {
      for (let i in this.resultList) {
        if (
          this.totalScore >= this.resultList[i].min &&
          this.totalScore <= this.resultList[i].max
        ) {
          this.curResult = this.resultList[i];
        }
      }
      this.isLock = false;
    },
    selectAnswer(index) {
      let curAnswer = this.dataList[this.curIndex].answerList;
      for (let i in curAnswer) {
        curAnswer[i].select = false;
      }
      curAnswer[index].select = true;
      this.totalScore += curAnswer[index].value;
      if (this.curIndex < this.dataList.length - 1) {
        setTimeout(() => {
          this.curIndex += 1;
          this.curQuizInfo = this.dataList[this.curIndex];
        }, 1000);
      } else {
        setTimeout(() => {
          this.isFinish = true;
        }, 1000);
      }
    },
    back() {
      if (this.curIndex > 0) {
        this.curIndex -= 1;
      } else {
        this.isStart = false;
      }
    },
    goHome() {
      this.isStart = false;
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #ffffff;
  margin: 30rpx 20rpx;
  border: none;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  .banner {
    width: 100%;
    border-radius: 16rpx 16rpx 0 0;
  }
}
.btn {
  margin: 40rpx 20rpx;
  background: linear-gradient(135deg, #ff4d4d 0%, #db0000 100%);
  color: #fff;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 16rpx rgba(219, 0, 0, 0.2);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(219, 0, 0, 0.2);
  }
}
.sub_text {
  text-align: center;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #999;
  .red {
    color: #ff4d4d;
    font-weight: 500;
  }
  .gray {
    color: #999;
    font-size: 24rpx;
    margin-top: 10rpx;
  }
}
.pub_ad_banner {
  margin: 40rpx 20rpx 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
}
.center {
  padding: 20rpx 0;
  background: #f8f9fa;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0 20rpx;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }
}
.features {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .feature-icon {
      font-size: 48rpx;
      margin-bottom: 10rpx;
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
      border-radius: 50%;
    }
    
    .feature-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  
  .btn-text {
    font-size: 32rpx;
  }
  
  .btn-icon {
    font-size: 36rpx;
    transition: transform 0.3s ease;
  }
  
  &:active .btn-icon {
    transform: translateX(6rpx);
  }
}
.footer {
  text-align: center;
  padding: 40rpx 0 20rpx;
  
  .copyright {
    font-size: 24rpx;
    color: #999;
  }
}
.description {
  margin: 30rpx 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .desc-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .desc-content {
    .desc-item {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 1.8;
      margin-bottom: 10rpx;
    }
  }
}
* {
  box-sizing: border-box;
}
.quiz {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  padding: 20px;
  
  .content {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      
      .location {
        font-size: 28px;
        color: #333;
        font-weight: 500;
        
        text {
          &:nth-child(2) {
            margin: 0 8px;
            color: #999;
          }
        }
      }
      .progress-bar {
        width: 100%;
        height: 6px;
        background: #f0f0f0;
        border-radius: 3px;
        margin-left: 10px;
        overflow: hidden;
        
        .progress {
          height: 100%;
          background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%);
          transition: width 0.3s ease;
        }
      }
    }
    
    .quiz-info {
      padding: 20px;
      display: flex;
      justify-content: space-around;
      background: #f8f9fa;
      border-radius: 12px;
      margin: 20px;
      
      .info-item {
        display: flex;
        align-items: center;
        
        .icon {
          font-size: 24px;
          margin-right: 8px;
        }
        
        .text {
          font-size: 24px;
          color: #666;
        }
      }
    }
    
    .question {
      padding: 30px 20px;
      
      .text {
        font-size: 28px;
        line-height: 1.6;
        color: #333;
        font-weight: 500;
      }
    }
    
    .answer {
      padding: 0 20px 30px;
      
      .item {
        width: 100%;
        display: block;
        box-sizing: border-box;
        margin-bottom: 16px;
        padding: 20px;
        text-align: center;
        background: #f8f9fa;
        border-radius: 12px;
        color: #333;
        font-size: 26px;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        
        &:active {
          transform: scale(0.98);
        }
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &.select {
          background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
          color: #fff;
          border-color: #6e8efb;
          box-shadow: 0 4px 15px rgba(110, 142, 251, 0.2);
        }
      }
    }

    .tips {
      margin: 30px 20px;
      padding: 20px;
      background: #fff8e6;
      border-radius: 12px;
      border: 1px solid #ffe4a3;
      
      .tip-title {
        display: block;
        font-size: 26px;
        color: #ff9500;
        font-weight: 500;
        margin-bottom: 12px;
      }
      
      .tip-item {
        display: block;
        font-size: 24px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.finish {  
  .unlock {
    background: #fff;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    
    .text {
      .p {
        display: block;
        text-align: center;
        font-size: 36px;
        color: #333;
        font-weight: 600;
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .btn {
      margin-top: 40px;
      background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
      border: none;
      color: #fff;
      font-size: 28px;
      padding: 20px 0;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(110, 142, 251, 0.2);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
  
  .result {
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    
    .title {
      display: block;
      font-size: 34px;
      margin-bottom: 30px;
      color: #333;
      font-weight: 600;
    }
    
    .level {
      display: block;
      font-size: 32px;
      margin-bottom: 30px;
      color: #6e8efb;
      font-weight: 600;
    }
    
    .desc {
      display: block;
      text-align: left;
      font-size: 26px;
      line-height: 1.6;
      color: #666;
    }
  }
}

.pub_ad_large_banner {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
}

.btn {
  margin-top: 40px;
  background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
  border: none;
  color: #fff;
  font-size: 28px;
  padding: 20px 0;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(110, 142, 251, 0.2);
  transition: all 0.3s ease;
  &:active {
    transform: scale(0.98);
  }
}

.btn-home {
  margin-top: 32px;
  background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
  color: #fff;
  border-color: #6e8efb;
  box-shadow: 0 4px 15px rgba(110, 142, 251, 0.2);
  font-weight: 600;
  transition: all 0.3s;
}
</style>

